//查看轨迹
import React, { useState } from 'react'
import '../../../css/oper_inspertion/guiji.less'
import { useNavigate } from 'react-router-dom'
import Taizhang from './taizhang'
import Map from '../../../../components/jwh/Mapcontainer'
import Yinhuan from './yinhuan'
const Index: React.FC = () => {
    const navigate = useNavigate()
    const fh = () => {
        navigate(-1)
    }
    const [isshow, setIsshow] = useState<boolean>(false)
    const dianji = (val: boolean) => {
        setIsshow(val)
    }



    return (
        <>
            <div className='content'>
                <div className='guiji'>
                    <p className='title'>- 总干渠巡查路线 -</p>
                    <div className='qudao'>
                        <p>巡查人员:姓名1</p>
                        <p>天气:多云</p>
                        <p>开始时间:2022-05-20 15:00</p>
                        <p>结束时间:2022-05-20 15:15</p>
                        <p>发现隐患:1个</p>
                    </div>
                    <div className='qudao'>
                        <p>巡查人员:姓名1</p>
                        <p>天气:多云</p>
                        <p>开始时间:2022-05-20 15:00</p>
                        <p>结束时间:2022-05-20 15:15</p>
                        <p>发现隐患:1个</p>
                    </div>
                    <div className='qudao'>
                        <p>巡查人员:姓名1</p>
                        <p>天气:多云</p>
                        <p>开始时间:2022-05-20 15:00</p>
                        <p>结束时间:2022-05-20 15:15</p>
                        <p>发现隐患:1个</p>
                    </div>
                    <div className='qudao'>
                        <p>巡查人员:姓名1</p>
                        <p>天气:多云</p>
                        <p>开始时间:2022-05-20 15:00</p>
                        <p>结束时间:2022-05-20 15:15</p>
                        <p>发现隐患:1个</p>
                    </div>
                    <div className='qudao'>
                        <p>巡查人员:姓名1</p>
                        <p>天气:多云</p>
                        <p>开始时间:2022-05-20 15:00</p>
                        <p>结束时间:2022-05-20 15:15</p>
                        <p>发现隐患:1个</p>
                    </div>
                </div>
                <div className='right-nei'>
                    <div className='right-nei-title'>
                        <div>
                            <button onClick={() => dianji(false)} className='active'>轨迹</button>
                            <button onClick={() => dianji(true)} className='active'>台账</button>
                        </div>
                        <button className='active' onClick={() => fh()}>返回</button>
                    </div>
                    <div >
                        {
                            !isshow ? <>
                                <div style={{ position: 'relative', width: '100%', height: 'calc(760px - 60px)', marginTop: '10px', }}>
                                    <Map center={[118.354507, 29.396977]} zoom={18} />
                                    {/* <Yinhuan /> */}
                                </div>
                            </>
                                : <Taizhang ></Taizhang>
                        }
                    </div>
                </div>
            </div>
        </>
    )
}

export default Index
